// components/UploadPics/UploadPics.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isAdd: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 上传图片数组
    chooseImgs: [],
    // 宽高比数组
    ratioArr: [],
    isFirst: true,
  },

  isDel: false,

  /**
   * 组件的方法列表
   */
  methods: {
    // 点击 “+” 选择图片
    handleChooseImg() {
      this.isDel = false
      // 2 调用小程序内置的选择图片api
      wx.chooseImage({
        // 同时选中的图片的数量
        count: 9,
        // 图片的格式  原图  压缩
        sizeType: ['original', 'compressed'],
        // 图片的来源  相册  照相机
        sourceType: ['album', 'camera'],
        success: (result) => {
          result.tempFiles.forEach((v, i) => {
            if (v.size > 1048576) {
              wx.showToast({
                title: `第${i+1}张图片太大`,
                icon: 'error'
              })
              result.tempFilePaths.splice(i, 1)
            }
          })
          this.setData ({
            // 图片数组 进行拼接 
            chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths]
          })
        }
      });
    },

    // 删除图片
    delImg (e) {
      this.isDel = true
      if (this.data.chooseImgs.length === 0) return
      const { index } = e.currentTarget.dataset
      this.data.ratioArr.splice(index, 1)
      let chooseImgs = this.data.chooseImgs
      chooseImgs.splice(index, 1)
      this.setData ({
        chooseImgs
      })
      console.log(this.data.ratioArr)
    },

    // 获取图片对象数组
    getImgs () {
      let arr = []
      for(let i=0; i<this.data.chooseImgs.length; i++) {
        arr.push({
          path: this.data.chooseImgs[i],
          aspectRatio: this.data.ratioArr[i]
        })
      }
      return arr
    },
    
    // 获取图片宽高
    onImgLoad (e) {
      if (this.data.isFirst) {
        this.data.isFirst = false
        return
      }
      if (this.isDel) return
      const { width, height } = e.detail
      this.data.ratioArr.push(height / width)
      console.log(this.data.ratioArr)
    }
  }
})
